<template lang="pug">
  #autocomplete
    #pickerBox
      input#pickerInput(placeholder='输入关键字选取地点')
      //- span.icon
      //-   i.iconfont &#xe608;
</template>

<script>
export default {
  name: 'Autocomplete',
  data() {
    return {
      searchText: '',
      poiPicker: null
    }
  },
  mounted() {
    this.initSerch()
  },
  methods: {
    initSerch() {
      var self = this
      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          city: '',
          input: 'pickerInput'
        })
        //初始化poiPicker
        self.poiPickerReady(poiPicker)
      })
    },
    handleSearch() {
      this.initSerch()
    },
    poiPickerReady(poiPicker) {
      var self = this
      window.poiPicker = poiPicker
      var marker = new AMap.Marker()
      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20)
      })
      //选取了某个POI
      poiPicker.on('poiPicked', function(poiResult) {
        var source = poiResult.source,
          poi = poiResult.item,
          info = `
            名字：${poi.name} <br>
            地区：${poi.district} <br>
            详细地址：${poi.district}${poi.address}
          `
        marker.setMap(map)
        infoWindow.setMap(map)
        marker.setPosition(poi.location)
        infoWindow.setPosition(poi.location)
        infoWindow.setContent('<h3>当前位置:</h3> <p>' + info + '</p>')
        infoWindow.open(map, marker.getPosition())

        self.$emit('sendaddress', {address: poi.address, lng: poi.location.lng, lat: poi.location.lat})
      })
    }
  }
}

</script>
<style lang="stylus">
#autocomplete
  height: 100%

#pickerBox
  position: relative
  width: 100%
  .icon
    position: absolute
    right: 5px
    top: 5px
    width: 30px
    height: 30px
    line-height: 30px
    i
      font-size: 20px
#pickerInput
  width: 100%
  -webkit-appearance: none
  background-color: #fff
  border-radius: 4px
  border: 1px solid #dcdfe6
  box-sizing: border-box
  color: #606266
  display: inline-block
  font-size: inherit
  height: 40px
  line-height: 1
  outline: 0
  padding: 0 15px
  -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1)
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1)

.amap-info-content
  padding: 0

  h3
    color: white
    font-size: 14px
    background-color: #ddd
    line-height: 26px
    padding: 0px 0 0 6px
    font-weight: lighter
    letter-spacing: 1px


  p
    font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
    padding: 4px;
    color: #666666;
    line-height: 23px;


.info-content img
  float: left;
  margin: 3px;


</style>
